
// 注册自定义指令
// 处理异常图片问题
export const imagerror = {
  // 指令的参数
  // 当指令作用的dom对象插入元素之后触发
  // 将指令作用在图片上
  // 指令的生命周期函数
  inserted: function(dom, options) {
    // options是一个对象的 value

    //   图片异常的逻辑
    //  监听img标签的错误事件  因为图片加载失败 会触发  onerror事件
    dom.src = dom.src || options.value

    // 图片只要异常 就处理图片默认值

    dom.onerror = function() {
      dom.src = options.value // 从哪里来 可以通过传入的方式设置
    }
  },
  // 更新属性后触发的函数 -inserted只会执行一次，这个可以更严谨，不过vue3中删掉了这个钩子函数
  componentUpdated(dom, options) {
    dom.src = dom.src || options.value
  }
}

// Vue.directive('imagerror', imagerror)

// Vue.directive('show', {})
// Vue.directive('text', {})

// 语法使用
// Vue.directive('指令名称', {
//   // 会在当前指令作用的dom元素 插入之后执行
//   // options 里面是指令的表达式
//   inserted: function(dom, options) {

//   }
// })
